<?php
$p = \Yii::$app->controller->module->templateAsset."/biyele/";
?>

<style type="text/css">
    
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

html,body,.main-body
{
    background-color: black;
     height:100%;
}

#container
{
    width: 500px;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
#container > img,#container > div
{
    position: absolute;
}
#leaf1
{
    left: 0px;
    top: 0px;
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: rotate(-51deg);
}
#camara
{
    left: 300px;
    top: 579px;
    -webkit-transform: rotate(47deg) scale(0.3);
}
.page > img,.page > div
{
    position: absolute;
}
#leaf2
{
    left: 156px;
    top: 0px;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: rotate(30deg);
    opacity: 0;
}
.divv
{
    border: 7px solid #fff;
    background-color: #9c9c9c;
    width: 400px;
    height: 584px;
    box-shadow: 1px 1px 10px rgba(132,132,132,0.7);
    overflow: hidden;
}
#div1v,#div2v,#div3v,#div4v,#div5v
{
    left: 46px;
    top: 133px;
    -webkit-transform: rotate(-8deg);
    opacity: 0;
}
.divh
{
    width: 480px;
    height: 350px;
    border: 7px solid #fff;
    background-color: #9c9c9c;
    box-shadow: 1px 1px 10px rgba(132,132,132,0.7);
    overflow: hidden;
}
#div1h,#div2h,#div3h,#div4h,#div5h
{
    left: 10px;
    top: 220px;
    -webkit-transform-origin: 100% 0%;
    -webkit-transform: rotate(-6deg);
    opacity: 0;
}
#leaf3
{
    -webkit-transform-origin: 0% 80%;
    opacity: 0;
    width: 402px;
    height:180px;
}
#leaf4
{
    top: 0px;
    left: 225px;
    -webkit-transform-origin: 100% 60%;
    opacity: 0;
}
#leaf5
{
    left: 0px;
    top: 0px;
    -webkit-transform-origin: 0% 80%;
    -webkit-transform: rotate(0deg);
    opacity: 0;
}
#leaf6
{
    left: 570px;
    top: -43px;
    -webkit-transform: scale(-1,1);
    -webkit-transform-origin: 0% 100%;
    opacity: 0;
}
#yezi1
{
    left: 312px;
    top: -37px;
    width: 50px;
}
#yezi2
{
    left: 79px;
    top: -33px;
    width: 50px;
}
#yezi3
{
    left: 339px;
    top: -30px;
}
#yezi4
{
    left: 503px;
    top: 316px;
}
#leaf31
{
    left: 368px;
    top: 98px;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: rotate(-95deg) scale(1,1);
    position: absolute;
}
#yezi5
{
    left: 250px;
    top: -50px;
    width: 25px;
    /*-webkit-animation: leafs 14s 1s linear both;*/
}
#yezi6
{
    left: 507px;
    top: 129px;
    width: 20px;
    /*-webkit-animation: leafs 12s linear both;*/
}
#yezi7
{
    left: 508px;
    top: 215px;
    width: 20px;
    /*-webkit-animation: leafs 13s linear 2s both;*/
}
#yezi8
{
    left: -100px;
    top: 370px;
}
#xian
{
    left: 0px;
    top: 726px;
    -webkit-transform-origin: 0% 100%;
    opacity: 0;
}
#letter1
{
    width: 15px;
    height: 18px;
    background-image: url(<?=$p?>images/kawa.png);
    background-position: 0px 0px;
    left: 392px;
    top: 712px;
    opacity: 0;
}
#letter2
{
    width: 15px;
    height: 18px;
    background-image: url(<?=$p?>images/kawa.png);
    background-position: -16px 0px;
    left: 409px;
    top: 712px;
    opacity: 0;
}
#letter3
{
    width: 19px;
    height: 20px;
    background-image: url(<?=$p?>images/kawa.png);
    background-position: -34px 0px;
    left: 428px;
    top: 712px;
    opacity: 0;
}
#letter4
{
    width: 20px;
    height: 20px;
    background-image: url(<?=$p?>images/kawa.png);
    background-position: -13px 0px;
    left: 450px;
    top: 712px;
    opacity: 0;
}
</style>

<style type="text/css">
@-webkit-keyframes fengye
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    to    {-webkit-transform: translate(600px,500px) rotate(200deg);}
}
@-webkit-keyframes leaf1_in
{
    from  {-webkit-transform: rotate(-51deg);}
    to    {-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes leaf1_out
{
    from  {-webkit-transform: rotate(0deg);opacity: 1}
    to    {-webkit-transform: rotate(-51deg);opacity: 1}
}
@-webkit-keyframes camara_in
{
    0%   {-webkit-transform: rotate(47deg) scale(0.3);-webkit-animation-timing-function: ease-out;}
    10%  {-webkit-transform: rotate(0deg) scale(1);}
    82%  {-webkit-transform: rotate(9deg) scale(1);opacity: 1}
    100% {-webkit-transform: rotate(26deg) scale(1.3);opacity: 0}
}
@-webkit-keyframes title_in
{
    from  {opacity: 0;-webkit-transform: translate(0px,-50px);}
    to    {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes title_out
{
    from  {opacity: 1;-webkit-transform: translate(0px,0px);}
    to    {opacity: 0;-webkit-transform: translate(0px,50px);}
}
@-webkit-keyframes leaf2_in
{
    from  {opacity: 0;-webkit-transfrom: rotate(30deg);}
    to    {opacity: 1;-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes leaf2_out
{
    from  {opacity: 1;-webkit-transform: rotate(0deg);}
    to    {opacity: 0;-webkkt-transform: rotate(30deg);}
}
@-webkit-keyframes div1v_in
{
    from  {opacity: 0;-webkit-transform: rotate(0deg);}
    to    {opacity: 1;-webkit-transform: rotate(-8deg);}
}
@-webkit-keyframes div1v_out
{
    from  {opacity: 1;-webkit-transform: rotate(-8deg);}
    to    {opacity: 0;-webkit-transform: translate(-75px,132px) rotate(-33deg);}
}
@-webkit-keyframes div1h_in
{
    from  {opacity: 0;-webkit-transform: rotate(-6deg);}
    to    {opacity: 1;-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes div1h_out
{
    from  {opacity: 1;-webkit-transform: rotate(0deg);}
    to    {opacity: 0;-webkit-transform: translate(111px,-11px) rotate(23deg);}
}
@-webkit-keyframes leaf3_in
{
    from  {-webkit-transform: rotate(-14deg);opacity: 0}
    to    {-webkit-transform: rotate(0deg);opacity: 1}
}
@-webkit-keyframes leaf3_out
{
    from  {-webkit-transform: rotate(0deg);opacity: 1}
    to    {-webkit-transform: rotate(-14deg);opacity: 0}
}
@-webkit-keyframes div2v_in
{
    from  {opacity: 0;-webkit-transform: translate(-75px,132px) rotate(-33deg);}
    to    {opacity: 1;-webkit-transform: rotate(8deg);}
}
@-webkit-keyframes div2v_out
{
    from  {opacity: 1;-webkit-transform: rotate(8deg);}
    to    {opacity: 0;-webkit-transform: translate(-291px,0px) rotate(0deg);}
}
@-webkit-keyframes div2h_in
{
    from  {opacity: 0;-webkit-transform: translate(111px,-11px) rotate(23deg);}
    to    {opacity: 1;-webkit-transform: translate(18px,0px) rotate(7deg);}
}
@-webkit-keyframes div2h_out
{
    from  {opacity: 1;-webkit-transform: translate(18px,0px) rotate(7deg);}
    to    {opacity: 0;-webkit-transform: translate(284px,-8px) rotate(0deg);}
}
@-webkit-keyframes div3v_in
{
    from  {opacity: 0;-webkit-transform: translate(0px,-30px);}
    to    {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes div3h_in
{
    from  {opacity: 0;-webkit-transform: translate(0px,30px);}
    to    {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes div3v_out
{
    from  {opacity: 1;-webkit-transform: translate(0px,0px);}
    to    {opacity: 0;-webkit-transform: translate(0px,30px);}
}
@-webkit-keyframes div3h_out
{
    from  {opacity: 1;-webkit-transform: translate(0px,0px);}
    to    {opacity: 0;-webkit-transform: translate(0px,-30px);}
}
@-webkit-keyframes leaf4_in
{
    from  {-webkit-transform: rotate(20deg);opacity: 0}
    to    {-webkit-transform: rotate(0deg);opacity: 1}
}
@-webkit-keyframes leaf4_out
{
    from  {-webkit-transform: rotate(0deg);opacity: 1}
    to    {-webkit-transform: rotate(20deg);opacity: 0}
}
@-webkit-keyframes leaf5_in
{
    from  {-webkit-transform: rotate(-30deg);opacity: 0}
    to    {-webkit-transform: rotate(0deg); opacity: 1}
}
@-webkit-keyframes leaf5_out
{
    from  {-webkit-transform: rotate(0deg);opacity: 1}
    to    {-webkit-transform: rotate(-30deg);opacity: 0}
}
@-webkit-keyframes div4v_in
{
    from  {-webkit-transform: translate(-180px,-14px) rotate(0deg);opacity: 0}
    to    {-webkit-transform: translate(0px,-14px) rotate(8deg);opacity: 1}
}
@-webkit-keyframes div4v_out
{
    from  {-webkit-transform: translate(0px,-14px) rotate(8deg);opacity: 1}
    to    {-webkit-transform: translate(83px,88px) rotate(27deg);opacity: 0}
}
@-webkit-keyframes div4h_in
{
    from {-webkit-transform: translate(124px,21px) rotate(-1deg);opacity: 0}
    to   {-webkit-transform: translate(-19px,-17px) rotate(-6deg);opacity: 1}
}
@-webkit-keyframes div4h_out
{
    from  {-webkit-transform: translate(-19px,-17px) rotate(-6deg);opacity: 1}
    to    {-webkit-transform: translate(-227px,12px) rotate(-21deg);opacity: 0}
}
@-webkit-keyframes div5h_in
{
    from  {-webkit-transform: translate(-14px,-10px) rotate(-4deg);opacity: 0}
    to    {-webkit-transform: rotate(0deg);opacity: 1}
}
@-webkit-keyframes div5h_out
{
    from  {-webkit-transform: scale(1,1);-webkit-transform-origin: 50% 50%;opacity: 1}
    to    {-webkit-transform: scale(1,-1);-webkit-trnasform-origin: 50% 50%;opacity: 0}
}
@-webkit-keyframes div5v_in
{
    from  {-webkit-transform: rotate(5deg);opacity: 0}
    to    {-webkit-transform: rotate(0deg);opacity: 1}
}
@-webkit-keyframes div5v_out
{
    from  {-webkit-transform: scale(1,1);-webkit-transform-origin: 50% 50%;opacity: 1}
    to    {-webkit-transform: scale(-1,1);-webkit-transform-origin: 50% 50%;opacity: 0}
}
@-webkit-keyframes leaf6_in
{
    from  {-webkit-transform: rotate(21deg) scale(-1,1);opacity: 0}
    to    {-webkit-transform: rotate(0deg) scale(-1,1);opacity: 1}
}
@-webkit-keyframes leaf6_out
{
    from  {-webkit-transform: rotate(0deg) scale(-1,1);opacity: 1}
    to    {-webkit-transform: rotate(21deg) sclae(-1,1);opacity: 0}
}
@-webkit-keyframes leafing
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    to    {-webkit-transform: translate(500px,600px) rotate(360deg);}
}
@-webkit-keyframes yezi3
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    to    {-webkit-transform: translate(-371px,474px) rotate(360deg);}
}
@-webkit-keyframes yezi4
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    to    {-webkit-transform: translate(-528px,350px) rotate(360deg);}
}
@-webkit-keyframes leaf31_in
{
    from  {-webkit-transform: rotate(-95deg) scale(0);}
    to    {-webkit-transform: rotate(-95deg) scale(1);}
}
@-webkit-keyframes leafs
{
    from  {-webkit-transform: translate(0px,0px)  rotate(0deg);}
    to    {-webkit-transform: translate(-550px,500px) rotate(600deg);}
}
@-webkit-keyframes linein
{
    from  {-webkit-transform: scale(0,1);opacity: 1}
    to    {-webkit-transform: scale(1,1);opacity: 1}
}
@-webkit-keyframes letter 
{
    0%  {-webkit-transform: rotate(0deg);opacity: 1}
    15% {-webkit-transform: rotate(360deg);opacity: 1}
    100%{-webkit-transform: rotate(360deg);opacity: 1}
}
</style>

<div id='container'>
    <img src='<?=$p?>images/bg.jpg'>

    <img id='leaf1' src='<?=$p?>images/ye06.png'>
    <img id='camara' src='<?=$p?>images/camara.png'>


    <div id='pagetitle' style='position:absolute;width:370px;height:237px;top:300px;left:0px;opacity:0;'>
      <div style='position:absolute;width:300px;height:200px;overflow:hidden;display:table;left:20px;'>
          <div id='titlecontent' style='width:300px;height:200px;vertical-align:middle;display:table-cell;text-align:left;font-size:30px;line-height:50px;color:#626363;'></div>
      </div>
    </div>

    <div id='page1' class='page'>
        <div id='div1v' class='divv'>
            <img class='img' id='img1v'>
        </div>
        <div id='div1h' class='divh'>
            <img class='img' id='img1h'>
        </div>
        <img id='leaf2' src='<?=$p?>images/ye02.png'>
    </div>

    <div id='page2' class='page'>
        <div id='div2v' class='divv'>
            <img class='img' id='img2v'>
        </div>
        <div id='div2h' class='divh'>
            <img class='img' id='img2h'>
        </div>
        <div id='leaf3'>
            <img src='<?=$p?>images/ye05.png'>
            <img id='leaf31' src='<?=$p?>images/ye051.png'>
        </div>
    </div>

    <div id='page3' class='page'>
        <div id='div3v' class='divv'>
            <img class='img' id='img3v'>
        </div>
        <div id='div3h' class='divh'>
            <img class='img' id='img3h'>
        </div>
        <img id='leaf4' src='<?=$p?>images/ye04.png'>
    </div>

    <div id='page4' class='page'>
        <div id='div4v' class='divv'>
            <img class='img' id='img4v'>
        </div>
        <div id='div4h' class='divh'>
            <img class='img' id='img4h'>
        </div>
        <img id='leaf5' src='<?=$p?>images/ye01.png'>
    </div>

    <div id='page5' class='page'>
        <div id='div5v' class='divv'>
            <img class='img' id='img5v'>
        </div>
        <div id='div5h' class='divh'>
            <img class='img' id='img5h'>
        </div>
        <img id='leaf6' src='<?=$p?>images/ye03.png'>
    </div>

    <img id='yezi1' src='<?=$p?>images/ye061.png'>
    <img id='yezi2' src='<?=$p?>images/ye061.png'>

    <img id='yezi3' src='<?=$p?>images/ye021.png'>
    <img id='yezi4' src='<?=$p?>images/ye021.png'>

    <img id='yezi5' src='<?=$p?>images/zisu.png'>
    <img id='yezi6' src='<?=$p?>images/zisu.png'>
    <img id='yezi7' src='<?=$p?>images/zisu.png'>
    <img id='yezi8' src='<?=$p?>images/fenye.png'>

    <img id='xian' src='<?=$p?>images/xian.png'>
    <div id='letter1'></div>
    <div id='letter2'></div>
    <div id='letter3'></div>
    <div id='letter4'></div>

</div>

<script>
function id(name)
{
    return document.getElementById(name)
}

function showtitle()
{
    id('leaf1').style.webkitAnimation = 'leaf1_in 1s ease-out both';
    id('camara').style.webkitAnimation = 'camara_in 5s linear both';
    id('pagetitle').style.webkitAnimation = 'title_in 1s linear both';
    id('titlecontent').innerHTML = desc;

    id('yezi1').style.webkitAnimation = 'leafing 10s 1s linear both';
    id('yezi2').style.webkitAnimation = 'leafing 9s linear both';

    // timeout[1] = setTimeout(distitle,5000)
}

function distitle()
{
    id('leaf1').style.webkitAnimation = 'leaf1_out 1s linear both';
    id('pagetitle').style.webkitAnimation = 'title_out 1s linear both';

    id('xian').style.webkitAnimation = 'linein 1s linear both';
    id('letter1').style.webkitAnimation = 'letter 4s linear infinite';
    id('letter2').style.webkitAnimation = 'letter 4s 0.4s linear infinite';
    id('letter3').style.webkitAnimation = 'letter 4s 0.8s linear infinite';
    id('letter4').style.webkitAnimation = 'letter 4s 1.2s linear infinite';

    timeout[1] = setTimeout(show1,1000)
}

function show1()
{
    setImage('1')
    id('leaf2').style.webkitAnimation = 'leaf2_in 1.5s ease-out both';
    id('div1v').style.webkitAnimation = 'div1v_in 1.5s 0.5s ease-out both';
    id('div1h').style.webkitAnimation = 'div1h_in 1.5s 0.5s ease-out both';

    id('yezi3').style.webkitAnimation = 'yezi3 6s linear both';
    id('yezi4').style.webkitAnimation = 'yezi4 6s linear both';

    timeout[2] = setTimeout(show2,6000)
}

function show2()
{
    setImage('2')
    id('leaf2').style.webkitAnimation = 'leaf2_out 1.5s linear both';
    id('div1v').style.webkitAnimation = 'div1v_out 1s ease-in both';
    id('div1h').style.webkitAnimation = 'div1h_out 1s ease-in both';

    id('leaf3').style.webkitAnimation = 'leaf3_in 1.5s 1.5s linear both';
    id('div2v').style.webkitAnimation = 'div2v_in 1.5s 1.5s ease-out both';
    id('div2h').style.webkitAnimation = 'div2h_in 1.5s 1.5s ease-out both';

    id('yezi5').style.webkitAnimation = '';
    id('yezi6').style.webkitAnimation = '';
    id('yezi7').style.webkitAnimation = '';
    id('yezi8').style.webkitAnimation = '';


    id('leaf31').style.webkitAnimation = 'leaf31_in 3s 2s linear both';

    timeout[3] = setTimeout(show3,6000)
}

function show3()
{
    setImage('3')
    id('leaf3').style.webkitAnimation = 'leaf3_out 1.5s linear both';
    id('div2v').style.webkitAnimation = 'div2v_out 1.5s linear both';
    id('div2h').style.webkitAnimation = 'div2h_out 1.5s linear both';

    id('leaf4').style.webkitAnimation = 'leaf4_in 1.5s 1.5s linear both';
    id('div3v').style.webkitAnimation = 'div3v_in 1.5s 1.5s ease-out both';
    id('div3h').style.webkitAnimation = 'div3h_in 1.5s 1.5s ease-out both';

    id('yezi5').style.webkitAnimation = 'leafs 14s 3s linear both';
    id('yezi6').style.webkitAnimation = 'leafs 12s 2s linear both';
    id('yezi7').style.webkitAnimation = 'leafs 13s 4s linear both';

    timeout[4] = setTimeout(show4,6000)
}

function show4()
{
    setImage('4')
    id('leaf4').style.webkitAnimation = 'leaf4_out 1.5s linear both';
    id('div3v').style.webkitAnimation = 'div3v_out 1.5s linear both';
    id('div3h').style.webkitAnimation = 'div3h_out 1.5s linear both';

    id('leaf5').style.webkitAnimation = 'leaf5_in 1.5s 1.5s linear both';
    id('div4h').style.webkitAnimation = 'div4h_in 1.5s 1.5s ease-out both';
    id('div4v').style.webkitAnimation = 'div4v_in 1.5s 1.5s ease-out both';

    timeout[5] = setTimeout(show5,6000)
}

function show5()
{
    setImage('5')
    id('leaf5').style.webkitAnimation = 'leaf5_out 1.5s linear both';
    id('div4h').style.webkitAnimation = 'div4h_out 1.5s linear both';
    id('div4v').style.webkitAnimation = 'div4v_out 1.5s linear both';

    id('leaf6').style.webkitAnimation = 'leaf6_in 1.5s 1.5s linear both';
    id('div5h').style.webkitTransformOrigin = '50% 50%';
    id('div5h').style.webkitAnimation = 'div5h_in 1.5s 1.5s ease-out both';
    id('div5v').style.webkitAnimation = 'div5v_in 1.5s 1.5s ease-out both';


    id('leaf31').style.webkitAnimation = '';
    id('yezi3').style.webkitAnimation = '';
    id('yezi4').style.webkitAnimation = '';
    id('yezi8').style.webkitAnimation = 'fengye 6s 1s linear both';

    timeout[6] = setTimeout(show6,6000)
}

function show6()
{
    setImage('1')
    id('leaf6').style.webkitAnimation = 'leaf6_out 1.5s linear both';
    id('div5h').style.webkitAnimation = 'div5h_out 2s ease-out both';
    id('div5v').style.webkitAnimation = 'div5v_out 2s ease-out both';

    id('leaf2').style.webkitAnimation = 'leaf2_in 1.5s 2s ease-out both';
    id('div1v').style.webkitAnimation = 'div1v_in 1.5s 2s ease-out both';
    id('div1h').style.webkitAnimation = 'div1h_in 1.5s 2s ease-out both';

    timeout[7] = setTimeout(show2,6000)
}

call_me(load_images)

var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=5000;

var timeout = [];

function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    
    bl_keepload = 'first';
    step_load();

}
//ÿ��ִ�м��غ�5��ͼƬ
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //��������X��
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
      
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }

}
function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    // console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);
    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            distitle();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    distitle();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            distitle();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    distitle();
                },dis_titletime);
        }

    }
    
}

function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        console.log(Onload_imgs_url[image_url_index]);
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

     if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    console.log('setimg:' + Onload_imgs_url[image_url_index]);

    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
    var div;
    var div1;
    var divname;

    if(img_bili > 1)
    {
        divname = idname + 'h';
        div = id('div'+idname+'h');
        div1 = id('div'+idname+'v');
        width = 480;
        height = 350;
    }
    else
    {
        divname = idname + 'v';
        div = id('div'+idname+'v');
        div1 = id('div'+idname+'h');
        width = 400;
        height = 584;
    }

    div.style.display = 'block';
    div1.style.display = 'none';

    var img = id('img'+divname);
    img.src = Onload_imgs_url[image_url_index];

    if(img_bili > (width/height))
    {
        img.style.top = '0px';
        img.style.height = height + 'px';
        img.style.width = height*img_bili + 'px';
        img.style.left = -((height*img_bili-width)/2)+'px';
    }
    else
    {
        img.style.left = '0px';
        img.style.width = width+'px';
        img.style.height = width/img_bili + 'px';
        img.style.top = -((width/img_bili-height)/2) + 'px';
    }

    image_url_index++;
    if(image_url_index==Onload_imgs_url.length)
        image_url_index = 0;
}


function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{
    id('pagetitle').style.webkitAnimation = '';

    for(var i = 0; i<timeout.length; i++)
    {
        clearTimeout(timeout[i])
    }

    var elements = ['div1h','div1v','div2h','div2v','div3v','div3h','div4v','div4h','div5h','div5v','leaf1','camara','leaf2','leaf3','leaf31','leaf4','leaf5','leaf6','yezi1','yezi2','yezi3','yezi4','yezi5','yezi6','yezi7','yezi8','xian','letter1','letter2','letter3','letter4'];
    for(var i=0;i<elements.length;i++)
    {
        if(i <10)
            id(elements[i]).style.display = 'none';
        id(elements[i]).style.webkitAnimation = '';
    }


}

</script>